<template>
  <div>
    供应商信息页面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="supplier" class="demo-form-inline">
        <!-- 功能按钮 -->
        <el-form-item style="float: left">
          <el-button type="primary" @click="dialogFormVisible = true; dialogFormTitle='添加供应商'">添加供应商</el-button>
          <!-- <el-button type="primary" icon="el-icon-circle-plus-outline">添加供应商</el-button> -->
          <!-- <el-button type="danger" icon="el-icon-delete"> 批量删除 </el-button> -->
        </el-form-item>

        <!-- 查询条件 -->
        <el-form-item label="供应商名称：">
          <el-input
            v-model="supplier.sname"
            placeholder="请输入供应商名称"
            widht="20px"
          ></el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item >
          <el-button type="primary" icon="el-icon-search" @click="getAllSupplierButton">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="pageBean.beanList" style="widtindexh: 100%" >
        <el-table-column fixed type="index" label="序号" width="55"> 
        </el-table-column>
        <el-table-column fixed prop="sid" label="编号" width="80"></el-table-column>
        <el-table-column fixed prop="sname" label="供应商名称" width="190"></el-table-column>
        <el-table-column prop="contacts" label="联系人" width="100"></el-table-column>
        <el-table-column prop="sphone" label="联系电话" width="120"></el-table-column>
        <el-table-column prop="address" label="供应商地址" width="120"></el-table-column>
        <el-table-column prop="mainpro" label="主销产品" width="140"></el-table-column>
        <el-table-column prop="bank" label="开户银行" width="120"></el-table-column>
        <el-table-column prop="banknum" label="银行卡账号" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <p v-if="scope.row.banknum !== ''">{{ codeMask(scope.row.banknum) }}</p>
          </template>
        </el-table-column> 
        <el-table-column prop="updatetime" label="更新时间" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改信息" placement="bottom">
              <el-button type="primary" size="mini" icon="el-icon-edit" circle
                @click="handleEdit(scope.$index, scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除订单" placement="bottom">
              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteSupplier(scope.$index, scope.row)"></el-button>
            <!-- <el-button size="mini" type="danger" @click="deleteSupplier(scope.$index, scope.row)">删除</el-button> -->
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加供应商模态框，弹出层 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :rules="rules" :model="supplierAdd" label-width="80px" v-if="dialogFormTitle=='添加供应商'">
        <el-form-item label="供应商名称" prop="sname" label-width="60">
          <el-input v-model="supplierAdd.sname" style="width:600px"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts" >
          <el-input v-model="supplierAdd.contacts" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="sphone" >
          <el-input v-model="supplierAdd.sphone"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" prop="address">
          <el-input v-model="supplierAdd.address" ></el-input>
        </el-form-item>
        <el-form-item label="主销产品" prop="mainpro">
          <el-input v-model="supplierAdd.mainpro"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bank">
          <el-input v-model="supplierAdd.bank"></el-input>
        </el-form-item>
        <el-form-item label="银行卡账号" prop="banknum">
          <el-input v-model="supplierAdd.banknum"></el-input>
        </el-form-item>
      </el-form>
      <el-form :rules="rules" :model="supplierAdd" label-width="80px" v-if="dialogFormTitle=='修改信息'">
        <el-form-item label="联系人" >
          <el-input v-model="supplierAdd.contacts" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" >
          <el-input v-model="supplierAdd.sphone"></el-input>
        </el-form-item>
        <el-form-item label="主销产品" >
          <el-input v-model="supplierAdd.mainpro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSupplier()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[1, 3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>

<script>

// 激活码： 仅显示前2位与后2位，中间部分用 * 代替
export function codeMask(val) {
    if (val && val.length > 8) {
        return val.substr(0,4) + "*".repeat(val.length - 8) + val.substr(val.length - 4)
    } else {
        return val
    }
}
export default {
  data() {
    this.codeMask = codeMask;   // 激活码（银行卡）
    return {
      //定义验证规则
      rules: {
        sname: [
          {required: true, message: '供应商名字必填', trigger: 'blur' },
        ],
        contacts:[
          {required: true,message: '联系人必填', trigger: 'blur'}
        ],
        sphone:[
          {required: true,message: "请输入联系电话",trigger: "blur"},
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        banknum:[
            {required: true,message: '请输入银行卡号', trigger: 'blur'}
        ],
      },

      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 3,
      supplier: {},
      dialogFormVisible: false,
      supplierAdd:{}
      //pages: ""
    };
  },
  mounted() {
    this.getAllSupplier();
  },
  methods: {

    //模态框关闭执行
    closeDialog() {
      //清空数据
      this.supplierAdd = {};
      //清空前端验证提示
    },

    //条件查询操作
    getAllSupplierButton() {
      this.pageIndex = 1;
      this.pageSize = 3;
      this.getAllSupplier();
    },

    //重置按钮
    reset() {
      this.supplier = {};
      this.getAllSupplier();
    },

    //删除操作
    deleteSupplier(index, row) {
      this.$confirm("此操作将永久删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        this.$axios.post("/supplier/getnumPurReqAndSupplierBySid/"+ row.sid).then((resp) => {
          if(true){
            this.$axios.post("/supplier/removeBySid/"+ row.sid).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                type: "success",
                message: "删除成功!",
              });
                //起到刷新页面的作用
                this.getAllSupplier();
              }else{
                this.$message("该供应商下存在商品，不能删除");
              }
            });
          }
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    //编辑供应商信息
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle = "修改信息";
      //浅拷贝，将row行的数据拷贝到smapleModify中
      this.supplierAdd = { ...row };
    },

    //添加供应商
    addSupplier() {
      this.dialogFormVisible = false;
      if (this.dialogFormTitle == "添加供应商") {
        this.$axios
          .post("/supplier/add", this.supplierAdd)
          .then((resp) => {
            if (resp.data.code == 200) {
              alert("添加成功");
              //起到刷新页面的作用
              this.getAllSupplier();
            } else {
              this.$message(JSON.stringify(resp.data.msg));
            }
          });
      } else {
        this.$axios.post("/supplier/modify", this.supplierAdd).then((resp) => {
          if (resp.data.code == 200) {
            alert("修改成功");
            //起到刷新页面的作用
            this.getAllSupplier();
          } else {
            this.$message(JSON.stringify(resp.data.msg));
          }
        });
      }
    },

    //条件查询订单
    onSubmit() {
      this.pageIndex = 1;
      this.getAllSupplier();
    },

    //查询所有供应商
    getAllSupplier() {
      this.$axios
        .post(
          "/supplier/getAll/" + this.pageIndex + "/" + this.pageSize,
          this.supplier
          //,{headers:{'token':window.localStorage.getItem("token")}}
        )
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
         
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllSupplier();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllSupplier();
    },
  },
};
</script>

<style>
</style>